<!-- src/views/UserProfile.vue -->
<template>
  <div class="container">
    <div class="header">
      <h2>个人资料</h2>
      <button class="btn btn-outline-secondary" @click="goHome">
        返回主页
      </button>
    </div>

    <div class="card">
      <div class="card-header">
        <h5>基本信息</h5>
      </div>
      <div class="card-body">
        <message ref="messageComponent"></message>

        <div class="text-center">
          <div class="profile-picture" style="background: red"></div>
          <p class="text-muted">点击头像上传新图片</p>
        </div>

        <form id="profileForm">
          <div class="form-group">
            <label class="form-label" for="userId">用户ID</label>
            <input
                id="userId"
                v-model="user.id"
                class="form-control"
                disabled
            />
          </div>

          <div class="form-row">
            <div class="form-col">
              <div class="form-group">
                <label class="form-label" for="userName">用户名</label>
                <input
                    id="userName"
                    v-model="user.userName"
                    class="form-control"
                    disabled
                />
              </div>
            </div>
            <div class="form-col">
              <div class="form-group">
                <label class="form-label" for="email">邮箱</label>
                <input
                    id="email"
                    v-model="user.email"
                    class="form-control"
                    type="email"
                />
              </div>
            </div>
          </div>

          <div class="form-row">
            <div class="form-col">
              <div class="form-group">
                <label class="form-label" for="createTime">注册时间</label>
                <input
                    id="createTime"
                    v-model="user.createTime"
                    class="form-control"
                    disabled
                />
              </div>
            </div>
            <div class="form-col">
              <div class="form-group">
                <label class="form-label" for="isDelete">账户状态</label>
                <input
                    id="isDelete"
                    :value="user.isDelete === 0 ? '启用' : '禁用'"
                    class="form-control"
                    disabled
                />
              </div>
            </div>
          </div>

          <div class="form-group">
            <label class="form-label" for="password">新密码</label>
            <input
                id="password"
                v-model="password"
                class="form-control"
                placeholder="留空表示不修改密码"
                type="password"
            />
          </div>

          <div class="form-group">
            <label class="form-label" for="confirmPassword">确认新密码</label>
            <input
                id="confirmPassword"
                v-model="confirmPassword"
                class="form-control"
                placeholder="再次输入新密码"
                type="password"
            />
          </div>

          <div class="action-buttons">
            <button
                class="btn btn-success"
                type="button"
                @click.prevent="updateProfile"
            >
              更新资料
            </button>
            <button class="btn btn-danger" type="button" @click="logout">
              退出登录
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import Message from "@/components/Message.vue";
import {getUserInfo, logout as apiLogout, updateUserInfo,} from "@/utils/api.js";

export default {
  name: "UserProfile",
  components: {
    Message,
  },
  data() {
    return {
      user: {
        id: "",
        userName: "",
        email: "",
        createTime: "",
        isDelete: 0,
      },
      password: "",
      confirmPassword: "",
    };
  },
  mounted() {
    this.checkLoginAndLoadProfile();
  },
  methods: {
    async checkLoginAndLoadProfile() {
      try {
        const response = await getUserInfo();
        if (response && response.success && response.data) {
          this.user = response.data;
        } else {
          this.$refs.messageComponent.show(
              "获取用户信息失败: " + (response ? response.message : "未知错误"),
              "danger",
          );
        }
      } catch (error) {
        console.error("检查登录状态失败:", error);
        this.$refs.messageComponent.show(
            "检查登录状态失败: " + error.message,
            "danger",
        );
      }
    },
    async updateProfile() {
      // 简单验证
      if (this.password !== this.confirmPassword) {
        this.$refs.messageComponent.show("两次输入的密码不一致", "danger");
        return;
      }

      // 构造要更新的数据
      const updateData = {
        id: parseInt(this.user.id),
        userName: this.user.userName,
        email: this.user.email,
        createTime: this.user.createTime,
        isDelete: this.user.isDelete,
      };

      // 如果有新密码，添加到更新数据
      if (this.password) {
        updateData.password = this.password;
      }

      try {
        const response = await updateUserInfo(updateData);
        if (response && response.success) {
          this.$refs.messageComponent.show("个人资料更新成功！", "success");
          // 清空密码字段
          this.password = "";
          this.confirmPassword = "";
        } else {
          this.$refs.messageComponent.show(
              "更新失败: " + (response ? response.message : "未知错误"),
              "danger",
          );
        }
      } catch (error) {
        this.$refs.messageComponent.show(
            "更新失败: " + error.message,
            "danger",
        );
      }
    },
    goHome() {
      this.$router.push("/");
    },
    async logout() {
      try {
        await apiLogout();
        this.$router.push("/login");
      } catch (error) {
        console.error("登出失败:", error);
        this.$router.push("/login");
      }
    },
  },
};
</script>

<!-- 在<style>标签中修改路径 -->
<style scoped>
@import "../assets/css/pages/userData.css";
</style>
